$(document).ready(function () {
    /********************************/
    /*Timer
    /********************************/
    /**
    * Set your date here  (YEAR, MONTH (0 for January/11 for December), DAY, HOUR, MINUTE, SECOND)
    * according to the GMT+0 Timezone
    **/

    /**
    * The script
    **/
    var message = $('#message');
    var day = $('#day');
    var month = $('#month');
    var cycle = $('#cycle');

    var hour = $('#hour');
    var minute = $('#minute');
    var second = $('#second');

    var launch;
    sync();
    

    function sync() {
        var timeKeeperUri = '/api/TimeKeeper/CurrentTime';
        $.getJSON(timeKeeperUri)
            .done(function (data) {
                launch = data;
                setClock();
                $('.loader').fadeOut('slow', function () {
                    $(this).remove();
                });
            });
    }

    function setClock() {
        launch.Second += 1;
        if (launch.Second == 100) {
            launch.Second = 0;
            launch.Minute += 1;
        }
        second.html('<strong>' + launch.Second + '</strong><p>Second' + (launch.Second > 1 ? 's' : ''), '</p>');

        if (launch.Minute == 100) {
            launch.Minute = 0;
            launch.Hour += 1;
        }
        minute.html('<strong>' + launch.Minute + '</strong><p>Minute' + (launch.Minute > 1 ? 's' : ''), '</p>');

        if (launch.Hour == 10) {
            launch.Hour = 0;
            launch.Day += 1;
        }
        hour.html('<strong>' + launch.Hour + '</strong><p>Hour' + (launch.Hour > 1 ? 's' : ''), '</p>');

        if (launch.Day == 100) {
            launch.Day = 0;
            launch.Month += 1;
        }
        day.html('<strong>' + launch.Day + '</strong><p>Day' + (launch.Day > 1 ? 's' : ''), '</p>');

        if (launch.Month == 10) {
            launch.Month = 0;
            launch.Cycle += 1;
        }
        month.html('<strong>' + launch.Month + '</strong><p>Month' + (launch.Month > 1 ? 's' : ''), '</p>');

        cycle.html('<strong>' + launch.Cycle + '</strong><p>Cycle' + (launch.Cycle > 1 ? 's' : ''), '</p>');

        setTimeout(setClock, 1000);
        message.html('');
    }
});